<template>
	<view class="music-head" :style="{ color : color ,marginTop: statusBarTop + 'rpx'  }">
		<view style="width: 30%;padding: 1% 2%;">
			<view v-if="icon" class="music-head-icon" :class="{ 'music-head-iconBlack' : iconBlack }">
				<text @tap="handleToBack" class="iconfont iconzuojiantou-copy"></text> | <text @tap="handleToHome"
					class="iconfont iconshouye"></text>
			</view>
		</view>
		<view style="width: 40%;padding: 1%;display: flex;justify-content: center;line-height: 31px;">
			{{ title }}
		</view>
		<view style="width: 30%;padding: 1%;">
		</view>
	</view>
</template>

<script>
	import '@/common/iconfont.css'
	export default {
		data() {
			return {
				menuButton: 0,
				statusBarTop: 0,
			};
		},
		created() {
			// 1.获取屏幕可使用宽度
			let windowWidth = uni.getSystemInfoSync().windowWidth;
			// 2.获取状态栏高度
			const statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
			// 3.获取胶囊按钮位置信息
			const menuButton = uni.getMenuButtonBoundingClientRect();
			// 4.计算出导航栏高度  换算成rpx
			let navHeight = (menuButton.height + (menuButton.top - statusBarHeight) * 2) * (750 / windowWidth);
			// 5.导航栏与状态栏拉开距离  margin-top: statusBarTop + 'rpx'; 
			this.statusBarTop = statusBarHeight * (750 / windowWidth);
			this.menuButton = menuButton.bottom + menuButton.height + statusBarHeight;
		},
		props: ['title', 'icon', 'color', 'iconBlack'],
		methods: {
			handleToBack() {
				uni.navigateBack();
			},
			handleToHome() {
				this.$tab.switchTab('/pages/index')
			}
		}
	}
</script>

<style>

	.music-head {
		display: flex;
		height: 100vh;
		color: black;
		height: 50px;
		position: relative;
		justify-content: center;
		font-size: 16px;
		overflow: hidden;
	}

	.music-head-icon {
		width: 97px;
		height: 31px;
		background: rgba(0, 0, 0, 0.4);
		border-radius: 15px;
		line-height: 31px;
		display: flex;
		justify-content: space-evenly;
		color: white;
	}

	.music-head-iconBlack {
		color: black;
		background: white;
		border: 1px black solid;
	}
</style>